<template>


  <div class="container" v-if="props.movieScore != null">

    <div class="title">
      <div class="title-left">
        <img :src="logo" :alt="猫眼logo" class="logo">
        <span>{{ props.movieScore.scoreLabel }}</span>
      </div>
      <div class="title-right">
        <span class="want">{{ formattedWish }}想看</span>
        <span class="read">{{ formattedWatched }}看过 <van-icon name="arrow" /> </span>
      </div>


    </div>

    <div class="rank">
      <div class="score-imDb">
        <div class="score">{{ props.movieScore.score }}</div>
        <div class="stars">

          <vue3-star-ratings v-model="rating" :starSize="11" starColor="#ffb400" inactiveColor="#EBF5F50F"
            :numberOfStars="5" :disableClick="true" />


          <div class="imDb">IMDb {{ props.movieScore.imDb }}</div>
        </div>
      </div>

      <div class="reputation">
        <div class="left" :style="backgroundStyle">
          <div class="top">TOP</div>
          <div class="num">{{ props.movieScore.movieRank }}</div>
        </div>
        <div class="right">
          <div class="date">{{ props.movieScore.year }}年{{ props.movieScore.term }}月</div>
          <div class="num">{{ props.movieScore.secondWord }}</div>
        </div>
      </div>

      <div class="awards">



      </div>


    </div>



  </div>



</template>

<script>
import { defineComponent } from "vue";
import Vue3StarRatings from "vue3-star-ratings"; // 确保组件名称正确

export default defineComponent({
  components: {
    Vue3StarRatings // 确保组件名称与导入名称一致
  },
});
</script>


<script setup>
import logo from "@/assets/logo-new.png";
import top3 from "@/assets/top3-reputation.png";


import { computed } from "vue";


const props = defineProps({
  movieScore: {
    type: Object,
    default () {
      return {}
    }
  }
})

// 格式化
const formattedWish = computed(() => {
  return props.movieScore.wish.toLocaleString()
})

const formattedWatched = computed(() => {
  return props.movieScore.watched.toLocaleString()
})


// const rating = ref(0);

const rating = computed(() => {
  return (props.movieScore.score / 2); // 0-10分制转换为评分

})



const backgroundStyle = computed(() => ({
  backgroundImage: `url(${top3})`,
  backgroundSize: '30px 40px', // 或者 '200px 100px'
  backgroundPosition: 'center',
  backgroundRepeat: 'no-repeat'
}));



</script>


<style scoped>
.container {
  padding: 10px;
  border-radius: 10px;
  background-color: rgba(0, 0, 0, .18);
}

.container .title {
  color: #fff;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;

}

.container .title .title-left {
  display: flex;
  align-items: center;
}

.container .title .title-right {
  /* width: 100%; */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.container .title .title-right .read {
  margin-left: 10px;
}

.container .title .logo {
  height: 18px;
  line-height: 1;
  margin-right: 5px;

}


.container .rank {
  display: grid;
  grid-template-columns: 0.6fr 0.4fr;
  gap: 10px;
  padding: 10px;

}

.container .rank .score-imDb {
  display: flex;
  align-items: baseline;
  justify-content: center;
}


.container .rank .score {
  color: #ffb400;
  font-size: 26px;
  margin-right: 5px
}

.container .rank .stars .imDb {
  font-size: 10px;
  text-align: right;
  color: #fff;
  opacity: .6;
  zoom: .7
}


.container .rank .reputation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px;
  border-radius: 6px;
  color: #ffe186;
  border: 1px solid #b49c70;
  background-image: linear-gradient(270deg, rgba(0, 0, 0, .04), rgba(226, 177, 117, .11));
}

.container .rank .reputation .left {
  font-size: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

}

.container .rank .reputation .left .top {
  font-size: 18px;
  text-align: center;
  text-shadow: 0 1px 4px #8e5d25;
  font-weight: 600;
  letter-spacing: 0;
  transform: scale(.5);
  width: 20px;
  height: 20px;
  line-height: 1;
  transform-origin: 50%;
}

.container .rank .reputation .left .num {
  font-size: 15px;
  font-weight: 400;
  text-align: center;
  letter-spacing: 0;
  line-height: 1;

}

.container .rank .reputation .right {
  font-size: 12px;
}
</style>
